﻿@import "variables";

.e-switch[type="checkbox"] {
    outline: 0;
    user-select: none;
    display: inline-block;
    opacity: 0;

    @include switch-size($size-normal);

    &.e-switch {
        &-tiny {
            @include switch-size($size-extra-small);
        }

        &-small {
            @include switch-size($size-small);
        }

        &-medium {
            @include switch-size($size-medium);
        }

        &-plus {
            @include switch-size($size-large);
        }

        &-huge {
            @include switch-size($size-extra-large);
        }
    }
}

@each $name, $value in $theme-colors {
    $color: $value;

    .e-switch[type="checkbox"] {
        &.#{$name}:checked + label::before,
        &.#{$name}:checked + label:before {
            background-color: $color;
        }

        &:disabled {
            &.#{$name}:checked + label::before {
                background-color: rgba($color,.5);
            }
        }
    }
}
